<template>
  <view :class="$style.container" class="flex justify-evenly">
    <block v-for="(item, index) in functionList" :key="index">
      <view :class="$style.group" class="flex-col-center" v-if="item.type === 'feedback' ? isFeedbackShow : true"
        @click="handleViewClick(item.type)">
        <!-- <image :class="$style.image" :src="item.imgUrl" mode="widthFix"></image> -->
        <van-icon :name="item.icon" :dot="item.dot" size="25" />
        <view :class="$style.text">{{ item.label }}</view>
        <!-- 红点 -->
        <!-- <view v-show="item.state" :class="$style.message"></view> -->
      </view>
    </block>
  </view>
</template>

<script setup lang="ts">
import feedbackImg from "@/static/images/receive-assign/feedback.png";
import conferenceImg from "@/static/images/receive-assign/conference.png";
import mediaImg from "@/static/images/receive-assign/media.png";
import { onMounted, ref } from "vue";
import { queryAlertMedia } from '@/api';
import { useAuthStore } from '@/store'
const authStore = useAuthStore()

interface Props {
  isFeedbackShow: boolean;
  jqId: string | undefined
}
const props = withDefaults(defineProps<Props>(), {
  isFeedbackShow: true,
});



const mediaUrlList = ref<Array<any>>([]);


const functionList: any = [
  {
    label: '反馈',
    type: 'feedback',
    imgUrl: feedbackImg,
    dot: true,
    icon: 'comment-o',
  },
  {
    label: '会商',
    type: 'conference',
    imgUrl: conferenceImg,
    dot: true,
    icon: 'chat-o'
  },
  {
    label: '媒体',
    type: 'media',
    imgUrl: mediaImg,
    dot: null,
    icon: 'video-o'
  }
]

function handleViewClick(type: string) {
  // 媒体
  if (type === "media") {
    console.log('媒体', mediaUrlList.value)
    if (mediaUrlList.value.length > 0) {
     uni.navigateTo({ url: '/pages/alert-module/media-browse/index?jqId=' + props.jqId })
    } else {
      uni.navigateTo({ url: '/pages/empty-page/index?showImg=' + 0 })
    }

      // uni.navigateTo({ url: '/pages/alert-module/media-browse/index?jqId=' + props.jqId })

  } else if (type === "conference") {
    uni.navigateTo({ url: "/pages/chat/index", });
  } else if (type === 'feedback') {
    uni.navigateTo({ url: "/pages/chat-module/operation-feedback/index?jqId=" + props.jqId + '&alertCard=false', })
  }
}

function getList() {
  console.log('chancel', 'index', '69行', props.jqId);
  queryAlertMedia({ jqId: props.jqId, zhid: authStore.getOpenId }).then((res: any) => {
    console.log('chancel', 'index', '78行', res, res.data.resultCode);
    if (res.result.resultCode == "000000") {
      mediaUrlList.value = res.data && res.data.map((item: any) => {
        return {
          url: item.dmtDz,
          type: item.dmtGs,
        }
      }) || []
      console.log('chancel', 'index', '78行', mediaUrlList.value);
    }
  }).catch((e: any) => {
    console.log('chancel', 'index', '65行', e);
  })
}


onMounted(() => {
  getList()
})


</script>

<style lang="less" module>
.container {
  box-sizing: border-box;
  background-color: #ffffff;
  // border-radius: 10rpx;
  padding: 10rpx;
  z-index: 99;

  // .content {
  //   margin-top: 10rpx;
  // }

  .image {
    width: 55rpx;
    height: 55rpx;
  }

  .text {
    font-weight: 400;
    font-size: 28rpx;
    font-family: Microsoft YaHei;
    color: #333333;
    margin-top: -5rpx;
  }

  .message {
    width: 20rpx;
    height: 20rpx;
    background: #FF3333;
    border-radius: 50%;
    position: absolute;
    top: -7rpx;
    right: -10rpx;

  }

  .group {
    position: relative;
  }
}
</style>
